<template>
  <view class="content screen-width">
    <view class="title_head">
      <view class="title_item" @tap="backPage">
        <image src="../../static/returnimg.png" mode />
      </view>
      <view class="title_search">
        <view class="search_item">
          <input type="text" placeholder="请输入您想要查询的政策关键词" v-model="keyword" />
          <image src="../../static/proty/search_icon.png" mode @tap="searchConter" />
        </view>
      </view>
    </view>
    <view class="areaList">
      <span>
        <input type="text" :value="address ? address : '地区'" @tap="showArea" disabled />
        <image src="../../static/proty/botton_icon.png" mode />
      </span>
      <span>
        <input
          type="text"
          :value="departmentData ? departmentData : '部门'"
          @tap="showdepartment"
          disabled
        />
        <image src="../../static/proty/botton_icon.png" mode />
      </span>
    </view>

    <scroll-view scroll-y class="content_main" @scrolltolower="scrolltolower">
      <ul>
        <!-- 政策通知 -->
        <navigator
          :url="`/pages/policy/policyDetails?id=${item.policyId}&inform=通知`"
          redirect
          v-for="(item, index) in getNotifyList"
          :key="index"
          class="listItem"
        >
          <view class="title">
            <!-- {{ item.title }} -->
            <p v-html="item.title"></p>
          </view>
          <view class="center">
            <view class="area multipleRow">{{ item.departmentName }}</view>
            <view class="time multipleRow">{{ item.releaseTime }}</view>
          </view>
        </navigator>
      </ul>
      <!-- 没有数据的提示 -->
      <van-divider>我也是有底线的</van-divider>
    </scroll-view>
    <PickerView
      ref="picker"
      :isshowArea="isshowArea"
      :type="proType"
      @affirm="affirm"
      @cancel="cancel"
    ></PickerView>
    <!-- 部门 -->
    <van-popup v-model="isShowDepartment" position="bottom" :style="{ height: '50%' }">
      <van-picker title="标题" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="cancel" />
    </van-popup>
    <Festival></Festival>
  </view>
</template>

<script>
import { Toast } from "vant";
import { getCode } from "../../util/address.js";
export default {
  data() {
    return {
      dataItem: {
        closeDay: "", // 选中的时间
        departmentId: "", // 选中的部门id
        province: "", // 省份
        city: "", // 城市
        area: "" // 地区
      },
      proType: 0,
      address: "", // 选中的地区(展示)
      keyword: "", // 关键字
      departmentData: "", // 选中部门的数据(展示)
      currentItem: 0,
      getNotifyList: [], // 通知数据渲染列表
      getAreaData: [], // 接收地区的值
      areaList: {},
      isshowArea: false, // 显示地区框
      isShowDepartment: false, // 显示部门框
      columns: [], // 接收部门的数据
      getTimes: "", //展示数据(时间)
      pageNo0: 0, // 当前页0
      pageNo1: 1, // 当前页1
      oldAddress: "", // 保存地区
      pageSize: 10, // 页容量,
      total: 0,
      throttle: false, // 节流阀

      indicatorStyle: `height: ${Math.round(
        uni.getSystemInfoSync().screenWidth / (750 / 100)
      )}px;`,
      valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列

      provinceList: [[], [], []],
      province: "",
      nProvince: "",
      nCity: ""
    };
  },
  computed: {
    showCity() {
      let params = this.$store.state.cityInfo;
      // params.city = '东莞市'
      if (params.city === "" && params.province === "") {
        return true;
      } else {
        this.address = params.city;
        return false;
      }
    }
  },
  created() {
    this.address = uni.getStorageSync("city");
    this.dataItem.city = this.address;
    this.getList();
    this.initLoadArea();
    this.getDepartmentData(); /* 获取部门列表数据 */
  },
  onLoad(option) {
    // console.log();
    this.keyword = option.title;
  },
  onHide() {
    this.departmentData = "";
    this.dataItem.departmentId = "";
    this.dataItem.province = "";
    this.dataItem.city = "";
    this.dataItem.area = "";
    this.nProvince = "";
    this.nCity = "";
  },

  methods: {
    backPage() {
      uni.navigateBack({
        delta: 2
      });
    },
    // 通知列表
    getList() {
      this.throttle = true;
      if (!this.nProvince && !this.nCity) {
        this.dataItem.city = uni.getStorageSync("city");
        this.dataItem.province = uni.getStorageSync("province");
      }
      let obj = {
        beginDate: "",
        dq: getCode(
          this.dataItem.province,
          this.dataItem.city,
          this.dataItem.area
        ),
        endDate: "",
        pageIndex: this.pageNo0,
        pageSize: this.pageSize,
        policyId: "",
        source: this.departmentData,
        title: this.keyword,
        userID: ""
      };
      this.$post("/bmj-api/api/es/Policy/queryPolicyList.json", obj)
        .then(res => {
          if (res.retCode === 0) {
            this.$changeText(res.data.content, "title", this.keyword);

            if (this.pageNo0 === 0) {
              this.getNotifyList = res.data.content || [];
            } else {
              this.getNotifyList = this.getNotifyList.concat(res.data.content);
            }
            this.total = res.data.totalElements;
          }
        })
        .finally(() => {
          uni.hideLoading();
          this.throttle = false;
        });
      // for (const key in obj) {
      //   if (!String(obj[key]).length) delete obj[key];
      // }

      // let url = "/bmj-api/api/pms/pmsPolicyNoticeInfo/list";

      // this.$get(url, obj)
      //   .then((res) => {
      //     if (res.code == 200) {
      //       const { records, total } = res.result;

      //       this.getNotifyList.push(...records);

      //       this.total = total;
      //     }
      //   })
    },
    // 获取部门列表
    getDepartmentData() {
      let obj = {
        province: this.dataItem.province,
        city: this.dataItem.city,
        area: this.dataItem.area
      };
      if (obj.area !== "") {
        obj.province = "";
        obj.city = "";
      }
      if (obj.city !== "") {
        obj.province = "";
      }
      this.$get(
        "/bmj-api/api/pms/pmsPolicyNotice/queryRegionDepartmentInfo",
        obj
      ).then(res => {
        let arr = [];
        if (res.code == 200) {
          res.result.unshift({
            departmentName: "请选择",
            id: ""
          });
          res.result.forEach(el => {
            let obj = {
              text: el.departmentName,
              id: el.id
            };
            arr.push(obj);
          });
          this.columns = arr;
        }
      });
    },
    // 显示弹出层(地区)
    showArea() {
      if (this.showCity) {
        this.isshowArea = true;
      } else {
        this.isshowArea = false;
      }
    },
    // 确认按钮
    affirm(province, city, area) {
      this.dataItem.province = province;
      this.dataItem.city = city;
      this.dataItem.area = area;
      // this.dataItem.province = this.provinceList[0][this.valueArr[0]]
      // this.dataItem.city = this.provinceList[1][0][this.valueArr[1]]
      // this.dataItem.area = this.provinceList[2][0][this.valueArr[2]]
      let arr = [];
      if (this.dataItem.province) {
        arr.push(this.dataItem.province);
      }
      if (this.dataItem.province && this.dataItem.city) {
        arr.push(this.dataItem.province);
        arr.push(this.dataItem.city);
      }
      if (this.dataItem.province && this.dataItem.city && this.dataItem.area) {
        arr.push(this.dataItem.province);
        arr.push(this.dataItem.city);
        arr.push(this.dataItem.area);
      }
      let arrLen = Array.from(new Set(arr));

      for (let i = 0; i < arrLen.length; i++) {
        if (arrLen[i] === "请选择") {
          arrLen.splice(i, 1);
        }
      }

      if (arrLen.length == 1) {
        (this.dataItem.area = ""),
          (this.dataItem.city = ""),
          (this.dataItem.province = arrLen[0]);
      } else if (arrLen.length == 2) {
        (this.dataItem.province = arrLen[0]),
          (this.dataItem.area = ""),
          (this.dataItem.city = arrLen[1]);
      } else if (arrLen.length == 3) {
        (this.dataItem.province = arrLen[0]),
          (this.dataItem.city = arrLen[1]),
          (this.dataItem.area = arrLen[2]);
      } else {
        this.cancel(); // 空数组
        return;
      }
      this.address = arrLen.pop();
      this.nProvince = this.dataItem.province;
      this.nCity = this.dataItem.city;

      this.dataItem.departmentId = "";
      this.departmentData = "";
      this.getNotifyList = [];
      this.cancel();
      this.getDepartmentData();
      this.getList();
    },
    // 取消按钮(地区,部门)
    cancel(mark) {
      this.isshowArea = false;
      this.isShowDepartment = false;
    },

    /* 显示弹出层(部门) */
    showdepartment() {
      this.isShowDepartment = true;
    },
    // 点击确认按钮(部门)
    onConfirm(val) {
      this.departmentData = val.text;
      this.dataItem.departmentId = val.id;

      this.cancel();

      this.getNotifyList = [];
      this.pageNo0 = 0;
      this.getList();
    },

    // 点击搜索按钮
    searchConter() {
      this.getNotifyList = [];
      this.pageNo0 = 0;
      // 获取关键词的,点击搜索框
      this.getList();
    },

    scrolltolower() {
      if (!this.throttle) {
        if (this.getNotifyList.length >= this.total) {
          return;
        } else {
          this.pageNo0 = this.pageNo0 + 1;
          this.getList();
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.popup {
  height: fit-content;
  width: 100%;
  background: #fff;
}

.picker-btn {
  display: flex;
  height: 100upx;
  width: 100%;
  line-height: 100upx;
  background: #fff;
  font-size: 34upx;
  z-index: 1;
  border-bottom: 1rpx solid #f8f8f8;

  .left {
    flex: 1;
    color: #0076ff;
    padding-left: 40upx;
    box-sizing: border-box;
  }

  .right {
    flex: 1;
    text-align: right;
    padding-right: 40upx;
    color: #fe4533;
    box-sizing: border-box;
  }
}

picker-view {
  width: 100%;
  height: 500rpx;
  display: relative;
}
.item {
  line-height: 100rpx;
  text-align: center;
}

.title_head {
  padding: 20rpx 30rpx;
  background-color: #2862ad;
  display: flex;
  align-items: center;
  .title_item {
    width: 18rpx;
    height: 34rpx;
    margin-right: 20rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .title_search {
    flex: 1;
    padding: 20rpx auto;
    height: 120rpx;
    align-items: center;
    display: flex;

    .search_item {
      height: 80rpx;
      width: 100%;
      display: flex;
      background-color: #fff;
      align-items: center;
      border-radius: 14rpx;
    }
    input {
      flex: 1;
      font-size: 28rpx;
      padding: 10rpx 10rpx 0;
      padding-left: 30rpx;
      &::placeholder {
        font-size: 24rpx;
      }
    }
    image {
      width: 32rpx;
      height: 32rpx;
      margin: 0 30rpx;
    }
  }
}
.content_main {
  height: calc(100vh - 300rpx);
  // padding-bottom: 20rpx;
  ul {
    .listItem {
      border-radius: 10rpx;
      background-color: #fff;
      margin: 20rpx 30rpx;
      padding: 30rpx 40rpx;
      .title {
        color: #000;
        font-weight: 700;
      }
      .center {
        display: flex;
        margin-top: 20rpx;
        justify-content: space-between;
        .area {
          flex: 1;
          padding-right: 20rpx;
          color: #aaa;
          font-size: 20rpx;
        }
        .time {
          text-align: right;
          flex: 1;
          color: #aaa;
          font-size: 20rpx;
        }
      }
    }
    li {
      border-radius: 10rpx;
      background-color: #fff;
      margin: 20rpx 30rpx;
      padding: 30rpx 40rpx;
      .title {
        color: #000;
        font-weight: 700;
      }
      .center {
        display: flex;
        margin-top: 20rpx;
        justify-content: space-between;
        .area {
          flex: 1;
          padding-right: 20rpx;
          color: #aaa;
          font-size: 20rpx;
        }
        .time {
          flex: 1;
          color: #aaa;
          font-size: 20rpx;
        }
      }
    }
  }
}
.areaList {
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  height: 120rpx;
  span {
    height: 80rpx;
    background-color: #fff;
    margin-right: 50rpx;
    display: flex;
    padding: 10rpx 20rpx;
    align-items: center;
    image {
      width: 14rpx;
      height: 8rpx;
    }
    input {
      width: 140rpx;
      font-size: 25rpx;
      color: #44a2ff;
    }
  }
}
.van-dropdown-menu {
}
/deep/ .van-dropdown-menu__bar {
  display: flex;
  align-items: center;
  background-color: #f8f9fd;
  padding-left: 30rpx;
}
/deep/ .van-dropdown-menu__item {
  flex: none;
  padding: 10rpx 30rpx;
  text-align: center;
  height: 56rpx;
  background-color: #fff;
  margin-right: 20rpx;
  span {
    color: #77b0ff;
    font-size: 28rpx;
  }
}
</style>
